<template>
    <div class="print">
        <div class="list-menu">
            <el-collapse>
                <el-collapse-item title="预定义组件" name="1">
                    <draggable v-model="preset"
                               :options="{group:{ name:'people',  pull:'clone', put:false }}" :clone="clone">
                        <div class="item" v-for="item in preset">
                            <h4 class="title">{{item.title}}</h4>
                        </div>
                    </draggable>
                </el-collapse-item>
                <el-collapse-item title="装饰" name="2">
                    <draggable v-model="decorate"
                               :options="{group:{ name:'people',  pull:'clone', put:false }}" :clone="clone">
                        <div class="item" v-for="item in decorate">
                            <h4 class="title">{{item.title}}</h4>
                        </div>
                    </draggable>
                </el-collapse-item>
                <el-collapse-item title="自定义组件" name="3">
                    <draggable v-model="custom"
                               :options="{group:{ name:'people',  pull:'clone', put:false }}" :clone="clone">
                        <div class="item" v-for="item in custom">
                            <h4 class="title">{{item.title}}</h4>
                        </div>
                    </draggable>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div class="print-model">
            <div class="header">
                <div class="cell">
                    <p class="content">西贝测试  <span><input type="text" placeholder="(点击修改)"></span></p>
                </div>
                <div class="cell">
                    <div class="dotted-line"></div>
                </div>
            </div>
            <div class="info">
                <div class="content">
                    <p class="font-center tip">请将控件拖拽至虚线中</p>
                    <draggable v-model="info" class="dragArea" :options="{group:'people'}" @start="onStart"
                               @end="onEnd">
                        <div class="info" v-for="item in info" @click="setEditItem(item)">
                            <clauses :item="item"></clauses>
                        </div>
                    </draggable>
                </div>
                <div class="cell">
                    <div class="dotted-line"></div>
                </div>
            </div>
            <div class="goods">
                <div class="g-header">
                    <el-row>
                        <el-col :span="15"><p class="font-left">商品名</p></el-col>
                        <el-col :span="3"><p class="font-right">数量</p></el-col>
                        <el-col :span="3"><p class="font-right">单价</p></el-col>
                        <el-col :span="3"><p class="font-right">金额</p></el-col>
                    </el-row>
                </div>
                <div class="cell">
                    <div class="dotted-line"></div>
                </div>
                <div class="g-body">
                    <el-row>
                        <el-col :span="15"><p class="font-left">鱼香肉丝</p></el-col>
                        <el-col :span="3"><p class="font-right">1</p></el-col>
                        <el-col :span="3"><p class="font-right">12.8</p></el-col>
                        <el-col :span="3"><p class="font-right">12.8</p></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15"><p class="font-left">鱼香肉丝</p></el-col>
                        <el-col :span="3"><p class="font-right">1</p></el-col>
                        <el-col :span="3"><p class="font-right">12.8</p></el-col>
                        <el-col :span="3"><p class="font-right">12.8</p></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15"><p class="font-left">鱼香肉丝</p></el-col>
                        <el-col :span="3"><p class="font-right">1</p></el-col>
                        <el-col :span="3"><p class="font-right">12.8</p></el-col>
                        <el-col :span="3"><p class="font-right">12.8</p></el-col>
                    </el-row>
                </div>
                <div class="cell">
                    <div class="dotted-line"></div>
                </div>
            </div>
            <div class="pay">
                <div class="p-header">
                    <el-row>
                        <el-col :span="18"><p class="font-left">支付方式</p></el-col>
                        <el-col :span="6"><p class="font-right">金额</p></el-col>
                    </el-row>
                </div>
                <div class="cell">
                    <div class="dotted-line"></div>
                </div>
                <div class="p-body">
                    <el-row>
                        <el-col :span="18"><p class="font-left">现金</p></el-col>
                        <el-col :span="6"><p class="font-right">12.8</p></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18"><p class="font-left">银行卡</p></el-col>
                        <el-col :span="6"><p class="font-right">12.8</p></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18"><p class="font-left">储值</p></el-col>
                        <el-col :span="6"><p class="font-right">12.8</p></el-col>
                    </el-row>
                </div>
                <div class="cell">
                    <div class="dotted-line"></div>
                </div>
                <div class="p-footer">
                    <p>菜品合计: 100</p>
                </div>
                <div class="cell">
                    <div class="dotted-line"></div>
                </div>
            </div>
            <div class="footer">
                <div class="content">
                    <p class="font-center tip">请将控件拖拽至虚线中</p>
                    <draggable v-model="footer" class="dragArea" :options="{group:'people'}" @start="onStart"
                               @end="onEnd">
                        <div class="info" v-for="item in footer" @click="setEditItem(item)">
                            <clauses :item="item"></clauses>
                        </div>
                    </draggable>
                </div>
            </div>
        </div>
        <div class="setting">
            <setting :item="editItem"></setting>

        </div>
        <div class="dustbin" v-show="isDel">
            <draggable v-model="dustbin" :options="{group:'people'}">
                <p><i class="el-icon-delete"></i> 拖拽到此删除</p>
            </draggable>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import setting from './print/setting.vue';
    import  clauses from './print/item.vue';
    import draggable from 'vuedraggable';
    import cloneDeep from 'lodash/fp/cloneDeep';
    export default {
        data(){
            return {
                activeNames: '1',
                //预置项
                preset: [
                    {
                        type: 'text', //text img
                        setting: {
                            align: 'left', //center  left right
                            size: 'small' //small medium and large
                        },
                        title: '打印时间',
                        content: '打印时间:2017-07-24'
                    },
                    {
                        type: 'text', //text img
                        setting: {
                            align: 'left', //center  left right
                            size: 'medium' //small medium and large
                        },
                        title: '台位号',
                        content: '台位号:A58'
                    },
                    {
                        type: 'img', //text img
                        setting: {
                            align: 'center', //center  left right
                            size: 'medium' //small medium and large
                        },
                        title: '二维码',
                        content: '/static/img/qrcode.jpg'
                    }
                ],
                //装饰
                decorate: [
                    {
                        type: 'decorate', //text img
                        setting: {
                            align: 'center', //center  left right
                            size: 'center' //small medium large
                        },
                        title: '虚线',
                        content: '<div class="dotted-line"></div>'
                    },
                ],
                //自定义组件
                custom: [
                    {
                        type: 'input', //text img
                        setting: {
                            align: 'center', //center  left right
                            size: 'small' //small medium and large
                        },
                        title: '自定义文案',
                        content: '（请输入自定义文案）'
                    },
                ],
                info: [],
                footer: [],
                dustbin: [],
                editItem: {},
                isDel: false,
            }
        },
        components: {
            setting,
            clauses,
            draggable
        },
        methods: {
            setEditItem(item){
                this.editItem = item;
            },
            onStart(){
                this.isDel = true;
            },
            onEnd(){
                this.isDel = false;
            },
            clone(origin){
                return cloneDeep(origin);

            }
        },
        mounted(){

        }
    }
</script>


<style scoped lang="scss">
    $color: #20a0ff;

    .print {
        display: flex;
        height: 100%;
        width: 1000px;
        margin: auto;
        margin-bottom: 60px;
        p {
            margin: 0;
        }
        .list-menu {
            width: 300px;
            border: 1px solid $color;
            margin-right: 10px;
            height: 100%;
            .item {
                text-align: center;
                border: 1px dotted $color;
                padding: 10px 0;
                margin-bottom: 10px;
                .title {
                    margin: 0;
                }
            }
        }

        .print-model {
            width: 400px;
            border: 1px solid $color;
            margin-right: 10px;
            height: 100%;
            padding: 15px;
            box-sizing: border-box;
            position: relative;
            .header {
                padding-top: 20px;
                text-align: center;
                .content {
                    font-size: 18px;
                    margin: 0;
                    margin-bottom: 10px;
                }
                input {
                    background: none;
                    border: none;
                    width: 80px;
                    font-size: 14px;
                }
            }

            .pay {
                .p-footer {
                    font-size: 18px;
                    text-align: center;
                }
            }

            .font-left {
                text-align: left;
            }
            .font-center {
                text-align: center;
            }
            .font-right {
                text-align: right;
            }

            .tip {
                color: $color;
            }

            .cell {
                margin: 5px 0;
                .dotted-line {
                    width: 100%;
                    border-bottom: 1px dashed #000;
                }
            }
        }

        .setting {
            width: 300px;
            border: 1px solid $color;
            height: 100%;
        }

        .dustbin {
            position: fixed;
            top: 42px;
            left: 0px;
            z-index: 100;
            width: 100%;
            background: #ff4949;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            text-align: center;
        }

        .dragArea {
            border: 1px #e6e6e6 dashed;
            min-height: 50px;
        }

    }

</style>
